<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子属性</title>
    <style>
div{
    border:1px solid red;
    width:100px;
}
.div1
{
    width:100px;
    height:100px;
    margin:50px;
}
.div2 {
    width: 200px;
    height: 200px;
    /*设置盒子属性，  最终大小不变
     */
    box-sizing: border-box;
}
.div3{
    float:left;
}
.div4{
    float:left;
}
.div5{
    float:right;
}
    </style>
</head>
<body>

<div class="div2">
    <div class="div1"> </div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbbb</div>
<div class="div5">cccccc</div>
</body>

</html>